<template>
  <a-modal
    :title="this.tag === 1 ? $t('all.autotext1735') : $t('all.autotext1771')"
    :visible="visible"
    :okText="$t('all.autotext49')"
    :canceltext="$t('all.autotext975')"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model :model="form" :rules="rules" ref="formRef">
      <a-radio-group v-model="type" button-style="solid" size="small">
        <a-radio-button value="1">{{ $t('all.autotext1736') }}</a-radio-button>
        <a-radio-button value="2">{{ $t('all.autotext1737') }}</a-radio-button>
      </a-radio-group>
      <div class="silder">
        <a-slider
          v-if="type == 1"
          v-model="count"
          :min="value[0]"
          :max="value[1]"
          :tip-formatter="formatter"
          @change="countChange"
        />
        <div v-else>
          <a-form-model-item prop="cash" style="margin:0;">
            <a-input
              v-model="cashFlow"
              type="number"
              size="small"
              style="width: 200px;"
              @change="cashChange"
            />
            <span style="margin-left:10px;">{{ $t('all.autotext811') }}</span>
          </a-form-model-item>
        </div>
        <div class="silder-tag">{{ $t('all.autotext1764') }}{{ cashFlow || 0 }}{{ $t('all.autotext1765') }}</div>
      </div>
      <a-form-model-item :label="$t('all.autotext865')" prop="account">
        <a-select
          v-model="account"
          mode="multiple"
          :placeholder="$t('all.autotext812')"
          show-search
          :filter-option="filterOption"
          allowClear
        >
          <a-select-option v-for="item in personList" :key="item.id" :value="item.id">
            {{ item.account }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { listNoFinanceAndBiz, saveWarning, getWarning } from '@/api/entry/entry'

export default {
  data () {
    return {
      visible: false,
      businessCode: '',
      total: 0,
      tag: 1,
      type: '1',
      cashFlow: '',
      value: [0, 100],
      count: 0,
      account: [],
      personList: [],
      form: {},
      rules: {
        cash: [{ validator: this.validatePass, trigger: 'change' }]
      }
    }
  },
  mounted () {
    this.getFinanceAndBiz()
  },
  methods: {
    open (code, tag) {
      this.businessCode = code
      this.tag = tag
      this.getDetail()
      this.visible = true
    },
    async getDetail () {
      const res = await getWarning({
        id: this.tag === 1 ? this.businessCode : localStorage.getItem('CURRENT_PROID'),
        type: this.tag,
        classify: this.$store.state.user.classify
      })
      this.total = res.totalMoney
      this.type = res.warnType ? String(res.warnType) : '1'
      // if (this.type === '2') {
      //   this.cashFlow = res.warnMoney
      // } else {
      //   this.count = (res.warnMoney / this.total) * 100
      // }
      this.cashFlow = res.warnMoney
      this.count = (res.warnMoney / this.total) * 100
      this.account = res.userIdList || []
    },
    formatter (value) {
      return `${value}%`
    },
    validatePass (rule, value, callback) {
      if (this.cashFlow > this.total) {
        if (this.tag === 1) {
          callback(new Error(this.$t('all.autotext1738')))
        } else {
          callback(new Error(this.$t('all.autotext1775')))
        }
      } else {
        callback()
      }
    },
    async getFinanceAndBiz () {
      const res = await listNoFinanceAndBiz()
      this.personList = res
    },
    handleOk () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        // let warningAmount = 0
        // if (this.type === '1') {
        //   warningAmount = this.total * (this.count / 100)
        // } else {
        //   warningAmount = this.cashFlow
        // }
        await saveWarning({
          id: this.tag === 1 ? this.businessCode : localStorage.getItem('CURRENT_PROID'),
          type: this.tag,
          userIdListStr: this.account.join(','),
          warnType: this.type,
          warningAmount: this.cashFlow,
          classify: this.$store.state.user.classify
        })
        this.$emit('refresh')
        this.handleCancel()
      })
    },
    handleCancel () {
      this.count = 0
      this.cashFlow = ''
      this.account = []
      this.$refs.formRef.resetFields()
      this.visible = false
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    countChange () {
      this.cashFlow = (this.total * (this.count / 100)).toFixed(2)
    },
    cashChange () {
      // eslint-disable-next-line no-useless-escape
      this.cashFlow = this.cashFlow.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      this.count = (this.cashFlow / this.total) * 100
    }
  }
}
</script>

<style lang="less" scoped>
.silder {
  margin: 30px 0 30px;
  .silder-tag {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
  }
}
</style>
